// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', async () => {
    try {
        // 读取本地 JSON 文件（需通过 Live Server 启动才能正常读取）
        const response = await fetch('products.json');
        if (!response.ok) throw new Error('文件读取失败');

        const products = await response.json();
        renderProducts(products); // 渲染商品表格
    } catch (error) {
        const tbody = document.querySelector('#productTable tbody');
        tbody.innerHTML = `<tr class="no-data"><td colspan="4">${error.message}</td></tr>`;
    }
});

// 渲染商品列表到表格
function renderProducts(products) {
    const tbody = document.querySelector('#productTable tbody');
    tbody.innerHTML = ''; // 清空原有内容

    if (products.length === 0) {
        tbody.innerHTML = '<tr class="no-data"><td colspan="4">当前没有商品数据</td></tr>';
        return;
    }

    products.forEach(product => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${product.id}</td>
            <td>${product.name}</td>
            <td>¥${product.price.toFixed(2)}</td>
            <td>${product.stock}</td>
        `;
        tbody.appendChild(row);
    });
}